<template>
    <div class="app-container">
      <el-input
        v-model="url"
        placeholder="请输入Url"
        style="width: 10%"
        @keyup.enter.native="initEntityModels"
        clearable
      ></el-input>
      <el-button type="primary" icon="el-icon-search" @click="initEntityModels"
        >搜索</el-button
      >
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            >新增</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            @click="handleDelete"
            >批量删除</el-button
          >
        </el-col>
      </el-row>
      <el-table
        v-loading="listLoading"
        :data="tableData"
        border
        fit
        highlight-current-row
        style="width: 100%"
        @row-dblclick="dbSelected"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column width="380px" align="center" label="名称">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
  
        <el-table-column width="180px" align="center" label="父类">
          <template slot-scope="scope">
            <span>{{ scope.row.parentClass }}</span>
          </template>
        </el-table-column>
  
        <el-table-column width="180px" align="center" label="备注">
          <template slot-scope="scope">
            <span>{{ scope.row.comment }}</span>
          </template>
        </el-table-column>
  
        <el-table-column width="180px" align="center" label="文件基础路径">
          <template slot-scope="scope">
            <span>{{ scope.row.baseDirPath }}</span>
          </template>
        </el-table-column>
  
        <el-table-column width="180px" align="center" label="项目名称">
          <template slot-scope="scope">
            <span>{{ scope.row.projectName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handlePreview(scope.$index, scope.row)"
              >预览</el-button
            >
            <el-button size="mini" @click="dbSelected(scope.row)"
              >编辑</el-button
            >
            <el-button size="mini" @click="download(scope.$index, scope.row)"
              >下载</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
  
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 1000]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
      <!-- 预览界面 -->
  <el-dialog
      :title="preview.title"
      :visible.sync="preview.open"
      width="80%"
      top="5vh"
      append-to-body
      class="scrollbar"
    >
      <el-tabs v-model="preview.activeName" :tab-position="tabPosition">
        <el-tab-pane
          v-for="(value, key) in preview.data"
          :label="value.fileName"
          :name="value.fileName"
          :key="key"
        >
          <el-link
            :underline="false"
            icon="el-icon-document-copy"
            v-clipboard:copy="value.detail"
            v-clipboard:success="clipboardSuccess"
            style="float:right"
            >复制</el-link
          >
          <pre><code class="hljs" >{{highlightedCode(value, key)}}</code></pre>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    </div>
  </template>
  
  <script>
import {
  getEntityModels,
  preview,
  deleteEntityModel,
} from "@/api/entityModel.js";
export default {
  data() {
    return {
      tabPosition: "left",
      listLoading: true,
      tableData: [],
      pageSize: 20,
      currentPage: 1,
      totalCount: 1000,
      listQuery: {
        page: 1,
        limit: 20,
      },
      url: "",
      // 是否显示弹出层
      open: false,
      selectedIds: [],
      // 非单个禁用
      single: true,
      title: "title",
      project: [],
      projectTemp: {},
      types: [],
      marks: [],
      isCreate: false,
      // 预览参数
      preview: {
        open: false,
        title: "代码预览",
        data: {},
        activeName: "domain.java",
      },
    };
  },
  mounted: function () {
    // 网络请求统一处理
    this.initEntityModels();
  },
  methods: {
    initEntityModels() {
      this.listLoading = true;

      var params = {
        SkipCount: 0,
        MaxResultCount: this.pageSize,
        Url: this.url,
      };
      getEntityModels(params).then(
        (res) => {
          this.tableData = res.items;
          this.totalCount = res.totalCount;
        },
        (err) => {
          console.log("err :", err);
        }
      );
      this.listLoading = false;
    },
    dbSelected(row) {
      const routeData = this.$router.resolve({
        path: "/codeGenerator/codeGenerator",
        query: {
          id: row.id,
        },
      });
      window.open(routeData.href, "_blank");
    },
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(`当前页: ${val}`);
    },
    handleAdd() {
      const routeData = this.$router.resolve({
        path: "/codeGenerator/codeGenerator",
        query: {},
      });
      window.open(routeData.href, "_blank");
    },
    cancel() {
      this.open = false;
    },
    async submitForm() {
      let project = {
        url: this.projectTemp.url,
        startIndex: this.projectTemp.startIndex,
        endIndex: this.projectTemp.endIndex,
        nextIndex: this.projectTemp.nextIndex,
        placeholder: this.projectTemp.placeholder,
        encodingName: this.projectTemp.encodingName,
        listUrl: this.projectTemp.listUrl,
      };
      if (this.isCreate) {
        await createProject(project);
        this.open = false;
        this.$message({
          type: "success",
          message: "添加成功!",
        });
      } else {
        await updateProject(this.projectTemp.id, project);
        this.open = false;
        this.$message({
          type: "success",
          message: "更新成功!",
        });
      }

      this.initEntityModels();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectedIds = selection.map((item) => item.id);
      this.single = selection.length != 1;
    },
    handlePreview(index, row) {
      const id = row.id || this.selectedIds;
      preview(id).then((response) => {
        this.preview.data = response;
        this.preview.open = true;
        this.preview.activeName = this.preview.data[0].fileName;
      });
    },
    handleDelete(index, row) {
      const id = row.id || this.selectedIds;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          deleteEntityModel(id);

          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.initEntityModels();
        })
        .catch((e) => {
          console.log(e);
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    download(index, row) {
      const id = row.id || this.selectedIds;
      // download(id);

      window.open(
        process.env.VUE_APP_BASE_API +
          "/micro/entity-models/" +
          id +
          "/download",
        "_self"
      );
    },
    /** 高亮显示 */
    highlightedCode(code, key) {
      console.log(code, 79878564987);
      return code.detail;
    },
    /** 复制代码成功 */
    clipboardSuccess() {
      this.$message({
        type: "success",
        message: "复制成功",
      });
    },
  },
};
</script>
  
  <style></style>
  